<template>
    <li @click="fn" :class="{active:bool}">
        <slot></slot>
        <span>{{title}}</span>
    </li>
</template>

<script>
    export default {
        name: "child-tab",
        props:["title","mark","sel"],
        data(){
            return {}
        },
        methods:{
            fn(){
                this.$router.push("/"+this.mark);
                this.$emit('res', this.mark); // 子组件向父组件传值;
            }
        },
        computed:{
            bool:function(){
                return this.mark == this.sel;
            }
        }
    }
</script>

<style scoped>
.active{
    color:green;
}
</style>